<template>
	<div class="usermanagercontrol">
		<h4 style="margin-left: 30px;margin-bottom: 17px;margin-top: 12px;">用户信息管理</h4>
		<!-- 搜索 -->
		<div class="inpbox">
			
			<div>
				<el-input class="inp1" v-model="userName" @keyup.native.enter="search" placeholder="输入用户名"></el-input>
				<el-input class="inp1" v-model="userPhone" @keyup.native.enter="search" placeholder="输入联系方式"></el-input>
				<el-button class="inp2" type="primary" @click="search" icon="el-icon-search">搜索</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<el-table class="el_table" :data="userinfo">
			<el-table-column label="头像" prop="logStatus" width="180">
				<template slot-scope="scope">
					<!-- {{scope.row.iserIcon}} -->
					<img :src="scope.row.iserIcon" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户名" width="180">
			</el-table-column>
			<el-table-column prop="userAccount" label="账号">
			</el-table-column>
			<el-table-column prop="addressContent" label="收货地址">
			</el-table-column>
			<el-table-column prop="userPhone" label="联系方式">
			</el-table-column>
			
		</el-table>
		<!-- 分页 -->
		<el-pagination class="page" :page-size="pageSize" layout="prev, pager, next" @current-change="changepage"
			:total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				pageSize: 5,
				pageIndex: 1,
				total: 0,
				userinfo:[],
				
				user:"",
				phone:"",
				// 搜索
				userName:"",
				userPhone:""
			}
		},
		methods:{
			//分页改变每页的数据
			changepage(page) {
				this.pageIndex = page
				this.user=this.userName
				this.phone=this.userPhone
				this.searchUser()
			},
			search(){
				this.pageIndex=1
				this.user=this.userName
				this.phone=this.userPhone
				this.searchUser()
			},
			//获取所有用户
			getUser(){
				//  http://localhost:8081/user/show
				this.$http.post(this.baseUrl+"user/show",{
					pageSize:this.pageSize,
					pageIndex:this.pageIndex
				}).then(res=>{
					if(res.data.code==200){
						// console.log(res.data.data)
						this.userinfo=res.data.data.context
						this.pageIndex=res.data.data.pageIndex
						this.total=res.data.data.pageTotal * this.pageSize
					}
				})
			},
			//根据用户名和联系方式搜索用户
			searchUser(){
				// http://localhost:8081/user/search
				this.$http.post(this.baseUrl+"user/search",{
					pageSize:Number(this.pageSize),
					userName:this.user,
					userPhone:this.phone,
					pageIndex:Number(this.pageIndex)
				}).then(res=>{
					if(res.data.code==200){
						// console.log(res.data.data)
						this.userinfo=res.data.data.context
						this.pageIndex=res.data.data.pageIndex
						this.total=res.data.data.pageTotal * this.pageSize
					}
				})
			}
		},
		mounted() {
			this.getUser()
		}
	}
</script>

<style>
	/* 查询部分 */
	.usermanagercontrol .inpbox {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}
	
	.usermanagercontrol .inpbox .inp1 {
		margin-left: 30px;
		width: 230px;
		float: left;
	}
	
	.usermanagercontrol .inpbox .inp2 {
		margin-left: 30px;
		float: left;
	}
	/* 表格 */
	.usermanagercontrol .el-table .el-table__cell {
		text-align: center;
	}
	
	
	.usermanagercontrol .page {
		margin-top: 30px;
		text-align: center;
	}
</style>